<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>修改商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button type="primary" @click="$router.go(-1)">后退</el-button>

      <el-alert title="修改小米商品" type="info" center show-icon :closable="false"></el-alert>
      <!-- 步进器 -->
      <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="添加图片"></el-step>
        <el-step title="参数设置"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
      <!-- 对应的选项添加 -->
      <el-form :model="addForm" :rules="rulesForm" ref="ruleForm">
        <!-- 基本信息添加 -->
        <!-- 用来包裹每一项添加 -->
        <el-tabs :tab-position="'left'" v-model="activeIndex" :before-leave="beforeTabLeave">
          <!-- 商品信息添加 -->
          <el-tab-pane label="商品信息" name="0" :class="activeIndex == '0' ? 'is-active' : ''">
            <el-form-item label="商品名称" prop="title">
              <el-input v-model="addForm.title"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input v-model="addForm.price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品库存" prop="num">
              <el-input v-model="addForm.num" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品类型" required prop="type">
              <!-- <el-input v-model="addForm.type" type="select"></el-input> -->
              <el-select v-model="addForm.type" placeholder="请选择商品类型" style="width:300px;" prop="types">
                <el-option label="手机" value="1"></el-option>
                <el-option label="电视" value="2"></el-option>
                <el-option label="笔记本" value="3"></el-option>
                <el-option label="家电" value="4"></el-option>
                <el-option label="路由器" value="5"></el-option>
                <el-option label="电源" value="6"></el-option>
                <el-option label="健康" value="7"></el-option>
                <el-option label="耳机" value="8"></el-option>
                <el-option label="箱包" value="9"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发货地址" prop="addres">
              <el-cascader ref="valuesRef" v-model="addForm.addres" :options="city" :props="{ expandTrigger: 'hover' }" @change="handleChange" :clearable="true" style="width:300px;"></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <!-- 图片添加 -->
          <el-tab-pane label="添加图片" name="1" :class="{ 'is-active': yxs }">
            <!-- mini图片 -->
            <el-form-item label="商品附图(0~1)张">
              <el-upload action="/img/" list-type="picture-card" :limit="1" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handles" :file-list="fileList">
                <i class="el-icon-plus"></i>
                <!-- <i class="el-icon-delete" v-show="addForm.img" @click.stop="handleRemove3"  id="ims"></i>
                   <i   class="el-icon-plus avatar-uploader-icon"  v-show="addForm.img" id="ims"></i>
                  <img v-if="addForm.img" :src="addForm.img.split(',')[0]" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </el-form-item>
            <el-form-item label="商品大图(0~5)张">
              <el-upload action="/img/" :limit="5" list-type="picture-card" :on-preview="handlePictureCardPreview11" :on-remove="handleRemove1" :on-success="handles1" :file-list="fileList1">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible1">
                <img width="100%" :src="dialogImageUrl1" alt />
              </el-dialog>
            </el-form-item>
          </el-tab-pane>
          <!-- 参数设置 -->
          <el-tab-pane label="参数设置" name="2">
            <el-form-item style="width:550px;">
              <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
                {{ tag }}
              </el-tag>
              <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" style="width:90px;">
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div>
        <el-button type="primary" @click="down" v-if="c == 3 ? false : true">下一步</el-button>
        <el-button type="primary" @click="addGet" v-else>提交</el-button>
        <el-button type="primary" @click="up" v-if="c == 0 ? false : true">上一步</el-button>
        <el-button type="primary" @click="add">校验</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import city from './citydata.js'
export default {
  data() {
    return {
      fileList1: [],
      fileList: [],
      id: this.$route.query.id,
      c: 0,
      yxs: true,
      activeIndex: '0',
      addForm: {
        title: '',
        price: '',
        num: '',
        type: '',
        img: '',
        url: '',
        addres: [''],
        tiem: '',
        tit: ''
      },
      city,
      dialogVisible: false, // 商品mini图显示
      dialogImageUrl: '', // 商品mini图地址
      dialogVisible1: false, // 商品大图显示
      dialogImageUrl1: '', // 商品大图地址
      types: '',
      // 商品信息校验规则
      rulesForm: {
        title: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '请输入商品价格',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '选择商品类型',
            trigger: 'change'
          }
        ],
        num: [
          {
            required: true,
            message: '请输入商品库存',
            trigger: 'blur'
          }
        ],
        addres: [
          {
            required: true,
            message: '请选择省市区',
            trigger: 'blur'
          }
        ]
      },
      dynamicTags: [],
      inputVisible: false,
      inputValue: ''
    }
  },
  created() {
    this.getList()
    this.times()
    // console.log(this.id)
  },
  methods: {
    getList() {
      //  console.log(this.addForm.addres)
      this.$http.post('/goods/milei/get', { id: this.id }).then(res => {
        //  console.log(res)
        res.data.message.forEach(item => {
          if (item.type) {
            item.type = JSON.stringify(item.type)
          }
        })
        this.addForm = res.data.message[0]
        if (res.data.message[0].addres) {
          this.addForm.addres = res.data.message[0].addres.split(',')
          this.dynamicTags = res.data.message[0].tit.split(',')
          // console.log(this.addForm.addres)
          //  this.addForm.addres=this.addForm.addres.split(',')
        }
        // 商品大图渲染
        if (res.data.message[0].url) {
          res.data.message[0].url.split(',').forEach(item => {
            //  console.log(item,'多个图片')
            this.fileList1.push({ url: item })
          })
          // this.fileList1.push({url:res.data.message[0].url.split(',')})
        }
        //  this.fileList1.push({url:res.data.message[0].url?res.data.message[0].url.split(','):[]})
        // console.log(this.fileList1,'图片')
        this.fileList.push({ url: res.data.message[0].img.split(',')[0] })
      })
    },
    beforeTabLeave(activeName, oldActiveName) {
      // console.log(this)
      console.log(activeName, oldActiveName)
      if (oldActiveName === '0' && this.addForm.type === '') {
        this.$message.warning('请选择商品类型')
        return false
      }
    },
    // 商品mini预览
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    // 商品mini移除事件
    handleRemove() { },
    // 商品Mini上传事件
    handles(file) {
      this.addForm.img = file.data + ','
    },
    // 商品大图预览
    handlePictureCardPreview11(file) {
      this.dialogVisible1 = true
      this.dialogImageUrl1 = file.url
    },
    // 商品大图移除事件
    handleRemove1() { },
    // 商品大图上传事件
    handles1(file) {
      this.addForm.url += file.data + ','
    },
    // 图片移除事件
    handleRemove3(file, fileList) {
      this.addForm.img = ''
    },
    // 省市区
    handleChange(val) {
      console.log(val)
      this.addForm.addres = this.addForm.addres.join(',')
      console.log(this.addForm.addres)
    },
    add() {
      console.log(this.addForm)
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
      })
    },
    // 监听tag标签的删除事件
    handleClose(tag) {
      //  console.log(this.dynamicTags)
      console.log('没有数据？')
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)

      console.log((this.types = this.dynamicTags.join(',') + ''))
    },
    // input输入框事件
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 新增tag标签的事件
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
      this.addForm.tit = this.dynamicTags.join(',')
      console.log(this.dynamicTags)
    },
    down() {
      if (this.c === 3) return
      this.c++
      this.activeIndex = '' + this.c
    },
    up() {
      if (this.c === 0) return
      this.c--
      this.activeIndex = '' + this.c
    },
    // 提交事件
    addGet() {
      console.log(this.addForm.url)
      // console.log(typeof this.addForm.addres.join(","))
      console.log(this.times())
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          this.activeIndex = '0'
          return this.$message.warning('您有必选项未填')
        }
        this.addForm.id = this.id
        this.addForm.tiem = this.times()
        console.log(this.addForm.tiem)
        if (typeof this.addForm.addres === 'object') {
          this.addForm.addres = this.addForm.addres.join(',')
        }
        if (typeof this.addForm.addres) console.log(this.addForm)
        this.$http.post('/goods/milei/update', this.addForm).then(res => {
          if (res.data.err_code === 0) {
            this.$router.push('/gettypes')
            return this.$message.success('修改成功')
          }
        })
      })
      // this.times()
    },
    times() {
      const dt = new Date(+new Date())
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      console.log(`${y}-${m}-${d} ${hh}-${mm}-${ss}`)
      return `${y}-${m}-${d} ${hh}-${mm}-${ss}`
    }
  }
}
</script>
<style lang="less" scoped>
.el-form-item {
  width: 500px;
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  .el-input {
    width: 300px;
  }
  .el-upload--picture-card {
    line-height: 0 !important;
  }
  .avatar-uploader {
    display: flex;
    flex-direction: row;
    // overflow: hidden;
    #ims {
      position: relative;
      top: 0%;
      z-index: 99;
      //  background-color: #ccc;
      // color: #000;
      //  background-color: pink;
    }
    .avatar-uploader .el-upload :hover {
      z-index: 99;
      // border: 1px solid #000;
    }
    .avatar {
      // margin-top: -147px;
      position: absolute;
      top: 0;
      right: 0;
      width: 147px;
      height: 147px;
    }
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
